﻿@model IEnumerable<FingerPrint.WebUI.Models.SalesOrderModel>
@using Kendo.Mvc.UI;
@using System.Globalization;

@{
    ViewBag.Title = "Order";
}

@using (Html.BeginForm())
{

<div class="orderContent">   
        @(Html.Kendo().Grid(Model)    
            .Name("SalesOrder-Grid")

            // --- Data source in Ajax format ---
            .DataSource(dataSource => dataSource     
                .Ajax()
                .PageSize(50) 
                .Model(model => model.Id(so => so.SalesOrderID))    // Specify that the SalesOrderID property is the unique identifier of the model
                .Read(read => read.Action("Read", "SalesOrder"))     // method and controller         
                )
            
           
            // --- Mapping of ViewModel ---
            .Columns(columns =>
            {
                columns.Bound(so => so.SalesOrderID)
                .Width(30)
                .Template(os => Html.ActionLink("Edit", "Edit", new { id = os.SalesOrderID }, new { }))
                .ClientTemplate("<a href=\"" + "SalesOrder/Edit/" + "#= SalesOrderID #\">#= SalesOrderID #</a>")
                .Title("ID");
               

                columns.Bound(so => so.SalesOrderNumber)
                    .Width(50)
                    .Title("Order No.");

                columns.Bound(so => so.ReceivedDate)
                    .Width(50)
                    .Title("Received Date");

                //columns.Bound(so => so.EmployeeID)
                //    .Width(100);

                columns.Bound(so => so.Employee.EngName)
                    .Width(50)
                    .Title("Received By");  

                // Being Tested
                //columns.ForeignKey(p => p.EmployeeID, (System.Collections.IEnumerable)ViewData["employees"], "EmployeeID", "EmployeeName")
                //    .Title("Category").Width(150);              


                columns.Bound(so => so.CustomerID)
                    .Width(50)
                    .Title("Customer ID");

                columns.Bound(so => so.Deadline)
                    .Width(50)
                    .Title("Deadline");

                columns.Bound(so => so.InvoiceNumber)
                    .Width(50)
                    .Title("Invoice No.");

                columns.Bound(so => so.Remark)
                    .Width(200)
                    .Title("Remark");

                columns.Bound(so => so.ModifiedDate)
                    .Width(50)
                    .Title("Modified Date");
        
                // Add "Edit" and "Destroy" commands
                //columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);

                // Add "customised" command
                //columns.Command(command => command.Custom("ViewDetails").Click("showDetails"));

            })
            
            // --- Grid buildin features ---
            .Pageable(pageable => pageable.ButtonCount(10))      //  no of buttons below the grid
            .Scrollable(scrollable => scrollable.Height(600))                   //  the height of Grid
            .Sortable(sortable => sortable.AllowUnsort(false))  //  
            
            
            

            //.Reorderable(reorder => reorder.Columns(true))
            //.Groupable()
            //.Filterable()
            
            // Add "Create" command
            //.ToolBar(commands => commands.Create())
            // Set the edit mode to "PopUp"
            //.Editable(editable => editable.Mode(GridEditMode.PopUp))

            // --- CRUD ---
            // Specify the action method and controller name
            //    .Create(create => create.Action("Create", "SalesOrder"))
            //    .Read(read => read.Action("Read", "SalesOrder"))
            //    .Update(update => update.Action("Update", "SalesOrder"))
            //    .Destroy(destroy => destroy.Action("Destroy", "SalesOrder"))
            // --- End of CRUD ---



        )

        @*<script type="text/javascript">
            $(document).ready(function () {
                $("form.k-edit-form").kendoValidator();
            });
        </script>*@



@*Start of pop-up Window for editing*@
        @(Html.Kendo().Window().Name("Details") //The name of the window is mandatory. It specifies the "id" attribute of 
            .Title("Customer Details") //set the title of the window
            .Visible(false)     //Show the window after loading
            .Modal(true)        //Disable background after showing the window form
            .Draggable(true)    //Enable dragging of the window
            .Resizable()        //Enable resizing of the window
            .Width(600)         //Set width of the window      
        )
</div>

    <script type="text/x-kendo-template" id="template">
    <div id="details-container">
        <h2>#= SalesOrderID #</h2>
        <em>#= SalesOrderNumber #</em>
        <dl>
            <dt>City: #= ReceivedDate #</dt>
            <dt>Address: #= ReceivedBy #</dt>
        </dl>
    </div>
    </script>

    <script type="text/javascript">
        //Get the external template definition using a jQuery selector
        var detailsTemplate = kendo.template($("#template").html());

        function showDetails(e) {
            e.preventDefault();

            var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
            var wnd = $("#Details").data("kendoWindow");

            wnd.content(detailsTemplate(dataItem));
            wnd.center().open();
        }


        function employeeFilter(element) {
            element.kendoAutoComplete({
                dataSource: {
                    transport: {
                        read: "@Url.Action("FilterMenu_Employee")"
                    }
                }
            });
        }


    </script>
@*End of pop-up window*@

}